<template>
  <el-form ref="formRef" :model="form" label-width="100px">
    <el-form-item label="归属：" required>
      <el-select v-model="form.gradeLevel" placeholder="">
        <el-option value="1" label="计算机"></el-option>
        <el-option value="2" label="管理"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="学科：" required>
      <el-select v-model="form.subjectId" placeholder="">
        <el-option
          :key="index"
          v-for="(item, index) in subjectlist"
          :value="item.id"
          :label="item.name"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="试卷类型：" required label-width="100px">
      <el-select v-model="form.paperType" placeholder="">
        <el-option value="1" label="固定试卷"></el-option>
        <el-option value="4" label="时段试卷"></el-option>
        <el-option value="6" label="任务试卷"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="试卷名： " prop="name" required label-width="100px">
      <el-input class="halfinput" v-model="form.name" />
    </el-form-item>
    <el-form-item
      :key="index"
      :label="'标题' + (index + 1) + '：'"
      required
      v-for="(titleItem, index) in form.bigTitleViews"
    >
      <el-input v-model="titleItem.name" style="width: 80%" />
      <el-button
        type="text"
        class="link-left"
        style="margin-left: 20px"
        size="mini"
        @click="addQuestion(titleItem)"
      >
        添加题目
      </el-button>
      <el-button
        type="text"
        class="link-left"
        size="mini"
        @click="form.bigTitleViews.splice(index, 1)"
        >删除</el-button
      >
      <el-card
        class="exampaper-item-box"
        v-if="titleItem.questionItems.length !== 0"
      >
        <el-form-item
          :key="questionIndex"
          :label="'题目' + (questionIndex + 1) + '：'"
          v-for="(questionItem, questionIndex) in titleItem.questionItems"
          style="margin-bottom: 15px"
        >
          <el-row>
            <el-col :span="23">
              <div>{{ questionmap[questionItem.id] }}</div>
            </el-col>
            <el-col :span="1">
              <el-button
                type="text"
                size="mini"
                @click="titleItem.questionItems.splice(questionIndex, 1)"
                >删除
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-card>
    </el-form-item>
    <el-form-item
      label="建议时长"
      prop="suggestTime"
      required
      label-width="100px"
    >
      <el-input-number
        v-model="form.suggestTime"
        :min="1"
        :max="10"
        @change="handleChange"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="addTitle" type="success">添加标题</el-button>
    </el-form-item></el-form
  >
<<<<<<< HEAD
  <el-dialog
    class="el-dialog"
    v-model="dialogVisible"
    title="添加题目"
    width="70%"
    :before-close="handleClose"
  >
    <el-card
      ><el-row :gutter="20" class="header"
        ><el-col :span="7"
          ><el-input
            v-model="queryForm.name"
            placeholder="请输入问题id"
            tabindex="2"
            clearable
        /></el-col>
        <el-button type="primary" :icon="Search" @click="regetuser"
          >Search</el-button
        ></el-row
      ><el-table :data="showtableData" stripe style="width: 100%">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          v-for="(item, index) in options"
          :key="index"
        >
          <template #default="{ row }" v-if="item.prop === `action`">
            <el-button type="primary" size="small" @click="addquestion(row)"
              >添加</el-button
            >
          </template>
        </el-table-column></el-table
      >
      <el-pagination
        v-model:currentPage="queryForm.pageIndex"
        v-model:page-size="queryForm.pageSize1"
        :page-sizes="[5, 10, 20, 50]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    /></el-card>
  </el-dialog>
=======
>>>>>>> 7d520118954f103433f5074ad63a16f5b63acf51
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { addpaper } from '@/api/paper'
import { getsubject } from '@/api/subject'
import { options } from './optionsq'
import { ref } from 'vue'
<<<<<<< HEAD
import { getquestions, getquestionfromid } from '@/api/question'
=======
import {
  getquestions,
  getquestionfromid
} from '@/api/question'
>>>>>>> 7d520118954f103433f5074ad63a16f5b63acf51
const tableData = ref([])
const showtableData = ref([])
const typemap = ref(['单选题', '多选题', '判断题', '填空题', '简答题'])
const queryForm = ref({
  name: '',
  pageIndex: 1,
  pageSize: 1000,
  pageSize1: 10,
  role: 1
})
const total = ref(60)
const inigetuser = async () => {
  const res = await getquestions(queryForm.value)
  console.log('test')
  console.log(res)
  tableData.value = res.data.data.data.list
  total.value = res.data.data.count
  showtableData.value = []
  for (
    let i = queryForm.value.pageSize1 * (queryForm.value.pageIndex - 1);
    i < queryForm.value.pageSize1 * queryForm.value.pageIndex;
    i++
  ) {
    if (tableData.value[i]) showtableData.value.push(tableData.value[i])
  }
}
inigetuser()
const handleSizeChange = (pageSize) => {
  queryForm.value.pageIndex = 1
  queryForm.value.pageSize = pageSize
  inigetuser()
}
//  通过id检索
const regetuser = async () => {
  const res = await getquestionfromid(queryForm.value.name)
  showtableData.value = []
  showtableData.value[0] = res.data.data
  total.value = showtableData.value.length
}

const handleCurrentChange = (pagenum) => {
  queryForm.value.pageIndex = pagenum
  inigetuser()
}
const questionmap = ref([])
const scoremap = ref([])
const addquestion = (row) => {
  let order = currenttitle.value.length + 1
  currenttitle.value.push({ id: row.id, itemOrder: order })
  questionmap.value[row.id] = row.title
  scoremap.value[row.id] = row.score
  ElMessage({
    showClose: true,
    message: '成功添加问题',
    type: 'success'
  })
}
const form = ref({
  name: '',
  subjectId: 1,
  score: 0, //  得分提交的时候算一下
  questionCount: 0,
  paperType: null,
  gradeLevel: 1,
  bigTitleViews: [],
  suggestTime: null
})
const dialogVisible = ref(false)
const currenttitle = ref(null)
const subjectlist = ref([])
const getsubjectlist = async () => {
  const res = await getsubject()
  subjectlist.value = res.data.data
  // console.log(subjectlest.value)
}
getsubjectlist()
const submitForm = async () => {
  // 提交接口
  for (let i = 0; i < form.value.bigTitleViews.length; i++) {
    for (let j = 0; j < form.value.bigTitleViews[i].questionItems.length; j++) {
      form.value.questionCount = form.value.questionCount + 1
      form.value.score =
        form.value.score +
        scoremap.value[form.value.bigTitleViews[i].questionItems[j].id]
    }
  }
  ElMessage({
    showClose: true,
    message: '试卷创建成功',
    type: 'success'
  })
  await addpaper(form.value)
  form.value = {
    name: '',
    subjectId: 1,
    score: 0, //  得分提交的时候算一下
    questionCount: 0,
    paperType: null,
    gradeLevel: 1,
    bigTitleViews: [],
    suggestTime: null
  }
}
//  还不清楚后端要什么数据
//  主要问题 在于前端标题
const resetForm = () => {
  form.value.name = ''
  form.value.level = ''
}

const addTitle = () => {
  form.value.bigTitleViews.push({
    name: '',
    questionItems: []
  })
}
const addQuestion = (titleItem) => {
  console.log(titleItem)
  currenttitle.value = titleItem.questionItems
  dialogVisible.value = true
}
</script>

<style lang="scss" scoped>
.halfinput {
  width: 50%;
}
.exampaper-item-box {
  width: 100%;
  .q-title {
    margin: 0px 5px 0px 5px;
  }
  .q-item-content {
  }
}
</style>
